@extends('admin.main')

@section('content')
    <div class="wrapper wrapper-content">
        <div class="ibox">
            <div class="ibox-title">
                <h5>角色列表</h5>
            </div>
            <div class="ibox-content">
                @if($token['isHidden'])
                <div class="m-b">
                    <a href="{{url('admin/entrust/role-add')}}" class="btn btn-warning"><i class="fa fa-plus"></i> 新建角色</a>
                </div>
                @endif
                <table id="tblDataList" class="table table-hover">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>名称</th>
                            <th>全名</th>
                            <th>描述</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($roles as $row)
                        <tr data-id="{{$row->id}}">
                            <td>{{$row->id}}</td>
                            <td>{{$row->name}}</td>
                            <td>{{$row->display_name}}</td>
                            <td>{{$row->description}}</td>
                            <td>
                                <a href="javascript:;" class="m-r-xs js-edit">
                                    <i class="fa fa-pencil-square fa-lg"></i> 编辑
                                </a>
                                <a href="{{url('admin/entrust/role-users-list/'.$row->id)}}" class="m-r-xs" title="查看角色用户">
                                    <i class="fa fa-users"></i> 成员
                                </a>
                                <span class="m-r-xs" title="查看角色权限" style="cursor:pointer;color:#337ab7;">
                                    <i class="fa fa-unlock-alt"></i> 权限
                                </span>
                                @if($token['isHidden'])
                                <a href="javascript:;" class="m-r-xs js-del">
                                    <i class="fa fa-trash"></i> 删除
                                </a>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script id="tplRolePermsList" type="text/html">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">&times;</button>
                    <h4 class="modal-title">角色权限 <small>勾选以授权</small></h4>
                </div>
                <div class="modal-body">
                    <table class="table table-hover table-bordered">
                        <thead>
                            <tr>
                                <th width="60" class="text-center">
                                    <a href="javascript:;" onclick="checkAll()">全选</a>
                                </th>
                                <th>权限</th>
                                <th>权限名</th>
                                <th>描述</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($perms as $row)
                            <tr data-id="{{$row->id}}">
                                <td class="text-center">
                                    <label class="i-checks">
                                        <input type="checkbox" value="{{$row->id}}" class="js-check" />
                                    </label>
                                </td>
                                <td>{{$row->name}}</td>
                                <td>{{$row->display_name}}</td>
                                <td>{{$row->description}}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </script>
@endsection

@section('pageheader')
    <link href="/assets/iCheck/custom.css" rel="stylesheet">
@endsection

@section('pagescript')
    <script src="/assets/iCheck/icheck.min.js"></script>
    <script>
        $("#side-menu li[rel='entrust']").addClass("active")
            .find("ul").addClass("in")
            .find("li[rel='role']").addClass("active");

        template.defaults.imports.checkPerm = function (val, arr) {
            return $.inArray(val, arr) < 0 ? '' : ' checked=""';
        };

        var checkAll = function(){
            $(".js-check").iCheck("check");
        };

        seajs.use('models/entrustModel', function(entrustModel) {
            $("#tblDataList").on('click', '.js-edit', function(){
                var id = $(this).parents('tr').eq(0).data('id');
                window.location.href = "{{url('admin/entrust/role-edit')}}?id=" + id;
                return false;
            });

            var role_id;
            $("#tblDataList").on("click", "tr", function(e){
                if(e.target.tagName == "A"){
                    return true;
                }
                var id = $(this).data("id");
                role_id = id;
                entrustModel.getRolePermsRows({"id":id}, function(data){
                    $("#modalDialog").html(template("tplRolePermsList", data)).modal("show");
                    $(".js-check").each(function(){
                        if($.inArray(parseInt($(this).val()), data.grant_perms) > -1){
                            $(this).attr("checked", "checked");
                        }
                    });
                    $('.i-checks').iCheck({
                        checkboxClass: 'icheckbox_square-green',
                        radioClass: 'iradio_square-green',
                    });
                });
                $(this).addClass("info").siblings().removeClass("info");
            });

            $("#modalDialog").on('ifChanged', ".js-check", function(){
                var checked = $(this).prop("checked");
                if(checked){
                    entrustModel.grantPerm({'role_id':role_id,'perm_id':$(this).val()}, null, failure);
                }else{
                    entrustModel.removePerm({'role_id':role_id,'perm_id':$(this).val()}, null, function(data){
                        artInfo(data);
                        return false;
                    });
                }
            });

            $("#tblDataList").on('click', '.js-del', function(e){
                var id = $(this).parents('tr').eq(0).data('id');
                layer.confirm('确定要删除此角色吗？', {icon: 3}, function(index){
                    entrustModel.deleteRole({'id':id}, function(){
                        $(e.target).parents("tr").remove();
                        layer.close(index);
                    }, failure);
                });
            });
        });
    </script>
@endsection
